<!-- 登录 -->
<template>
  <div class="login">
    <el-form :model="loginInfo" :rules="rules" ref="LoginForm" size="medium" label-width="0px" class="login-form">
      <h3 class="title">{{title}}</h3>
      <tabs v-model="activeName">
        <pane label="账号密码登录" name="1">
          <div v-if="activeName === '1'">
            <el-form-item prop="account">
              <el-input prefix-icon="el-icon-user" v-model="loginInfo.account" @keyup.enter.native="handleLogin('LoginForm')"
                        autoComplete="on" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" prefix-icon="el-icon-lock" v-model="loginInfo.password" @keyup.enter.native="handleLogin('LoginForm')"
                        autoComplete="on" placeholder="请输入密码"></el-input>
            </el-form-item>
          </div>
        </pane>

        <pane label="手机验证码登录" name="2">
          <div v-if="activeName === '2'">
            <el-form-item prop="personMobile">
              <el-input prefix-icon="el-icon-user" v-model="loginInfo.personMobile" @keyup.enter.native="handleLogin('LoginForm')"
                        autoComplete="on" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item prop="smsCode">
              <el-input prefix-icon="el-icon-lock" v-model="loginInfo.smsCode" @keyup.enter.native="handleLogin('LoginForm')"
                        autoComplete="on" placeholder="请输入验证码">
                <el-button :loading="getCodeLoading" :style="{ width: codeBtnDisabled ? '70px' : 'auto' }" slot="append"
                           :disabled="codeBtnDisabled" @click="getCode">{{butStr}}</el-button>
              </el-input>
            </el-form-item>
          </div>
        </pane>
      </tabs>

      <el-form-item style="text-align:center;">
        <Cbutton style="width: 100%" type="primary" :btnloading="loading" @click="handleLogin('LoginForm')">登 录</Cbutton>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import tabs from '@/components/CTab/tabs'
import pane from '@/components/CTab/pane'
import { LoginRules } from '@/utils/rules'
import { DoLogin, GetAuthCode } from '@/api/login'
export default {
  name: '',
  components: {
    tabs, pane
  },
  data () {
    return {
      activeName: '1',
      title: process.env.VUE_APP_HTML_TITLE,
      inputVal: '',
      loginInfo: {
        account: '',
        password: '',
        personMobile: '',
        smsCode: ''
      },
      rules: LoginRules,
      getCodeLoading: false,
      loading: false,
      butStr: '获取验证码',
      second: 59,
      codeBtnDisabled: false
    }
  },
  methods: {
    handleLogin (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false
        let params = {}
        if (this.activeName === '1') {
          params.personMobile = this.loginInfo.account
          params.smsCode = this.loginInfo.password
          params.type = '1'
        } else {
          params.personMobile = this.loginInfo.personMobile
          params.smsCode = this.loginInfo.smsCode
          params.type = '2'
        }

        this.loading = true
        DoLogin(params).then(res => {
          let data = res.data
          this.$store.dispatch('login', data)
          // 前台设置全部权限
          // let permissions = []
          // if (data.permissions) {
          //   data.permissions.forEach(item => {
          //     permissions.push(item.keyword)
          //   })
          // }
          // this.$store.dispatch('setUserPermissions', permissions)
          // if (data.username === userName) {
          //   this.$router.replace({ path: sget('fullPath') || '/' })
          // } else {
          //   window.location.reload('/')
          // }

          // 获取后端设置的权限
          this.$store.dispatch('getLoginUserPermissionList')
        }).catch(() => {
          this.loading = false
        })
      })
    },

    getCode () {
      this.$refs['LoginForm'].validateField('personMobile', (errStr) => {
        if (!errStr) {
          this.getCodeLoading = true
          GetAuthCode({ personMobile: this.loginInfo.personMobile }).then(res => {
            this.getCodeLoading = false
            this.butStrTimeInterval()
          }).catch(() => {
            this.getCodeLoading = false
          })
        }
      })
    },

    // 倒计时
    butStrTimeInterval () {
      this.codeBtnDisabled = true
      this.butStr = this.second + '秒'
      this.timer = setInterval(() => {
        if (this.second <= 0) {
          clearInterval(this.timer)
          this.butStr = '获取验证码'
          this.second = 59
          this.codeBtnDisabled = false
        } else {
          this.second = this.second - 1
          this.butStr = this.second + '秒'
        }
      }, 1000)
    }
  }
}

</script>
